﻿@using SpyApp.Helpers;
@model SpyApp.Models.CustomPageList<SpyApp.Models.EntytiRepossitory.Location>
@{
    ViewBag.Title = "Location";
}

@{
    SpyApp.Models.CustomPageList<SpyApp.Models.Message> pageList = ViewBag.PageList;
}

<div class="page-header">
    <h3>
        <img src="~/Images/location-64.png" class="size-48"/>
        @ViewBag.Title
    </h3>
</div>

@*@{Html.RenderPartial("AddvanceSearchPartial", new SpyApp.Models.MessageModel.SearchCondition());}*@

<nav id="main-page-list-1">
    <script>
        document.getElementById("main-page-list-1").appendChild(
            getPageList(
            '@Model.PageCount',
            '@Model.PageIndex',
            '@SpyApp.Models.BaseCommon.Enum.StaticValue.CURRENT_PAGE'));
    </script>
</nav>

<div class="table-contain">
    <!--50%-->
    <table class="form-column medium-6 small-12" id="data-table">
        <thead>
            <tr>
                <th>Latitude</th>
                <th>Longitude</th>
                <th>Date Time Check</th>
                <th>Google map</th>
            </tr>
        </thead>
        <tbody>
            @if (Model.ListCustom == null) {
                <tr>
                    <td colspan="100%"> null </td>
                </tr>
            }

            else{ foreach (var item in Model.ListCustom) {
                <tr>
                    <td data-type="latitude">@item.Latitude</td>
                    <td data-type="longitude">@item.Longitude</td>
                    <td>@item.DateTimeCheck</td>
                    <td>
                        <a href="http://maps.google.com/maps?q=@item.Latitude,@item.Longitude" target="_blank">View on Map</a>
                    </td>
                </tr>
                }
           }
        
        </tbody>
    </table>
    <!--50% map-->
    <section class="map-contain form-column medium-6 small-12">
        <div id="map-canvas"></div>
    </section>
</div>

<nav id="main-page-list-2">
    <script>
        document.getElementById("main-page-list-2").appendChild(
            getPageList(
            '@Model.PageCount',
            '@Model.PageIndex',
            '@SpyApp.Models.BaseCommon.Enum.StaticValue.CURRENT_PAGE'));
    </script>
</nav>



@section style{
    <style>
        .map-contain {
            height: 400px;
        }
        #map-canvas {
            height: 100%;
        }

        #data-table tr:hover {
            cursor: pointer;
        }

        #data-table tr.active {
            font-weight: bold;
        }
            #data-table tr.active td {
                color: #9C27B0;
            }
    </style>
}

@section script{
    <!--https://code.google.com/apis/console/?noredirect&pli=1#project:171553691766:access => create new browse key-->
    <!--<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBcCLmm20YjigJ89HjtlXcyE2ndrOPXhhM"></script>-->
    <!--yêu cầu đăng nhập, save vị trí, khỏi key-->
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script type="text/javascript">
        var currPosition;
        var map;
        var myLocations = [
            @foreach (var item in Model.ListCustom)
	        {
                @:{lat : '@item.Latitude',
                @:lng: '@item.Longitude' 
                @:},
	        }
        ];
        var myMarkers = [];
        var myPolylines;

        function initialize() {
            //#region init map
            currPosition = new google.maps.LatLng(
                '@Model.ListCustom.First().Latitude',
                '@Model.ListCustom.First().Longitude');

            var mapOptions = {
                center: currPosition,
                zoom: 16
            };

            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            map.setHeading(90);
            //#endregion

            //#region init markers
            for (var i = 0; i < myLocations.length; i++) {
                var location = new google.maps.LatLng(myLocations[i].lat, myLocations[i].lng);
                addMarker(location);
            }
            setAllMap(map); // set map marker
        }
        google.maps.event.addDomListener(window, 'load', initialize);

        // row click => focus map
        $("#data-table").delegate("tr", "click", function () {
            var latitude = $(this).find("td[data-type=latitude]").text();
            var longitude = $(this).find("td[data-type=longitude]").text();
          
            showMapAt(latitude, longitude); // map at

            // clear select css
            $("#data-table tr").removeClass("active");
            // add curr to select css
            $(this).addClass("active");
        });

        // Add a marker to the map and push to the array.
        function addMarker(location) {
            var imagePath = '@Url.Content("~/Images/gps-point-32.png")'; // đổi ảnh mark

            var marker = new google.maps.Marker({
                position: location,
                map: map,
                icon: imagePath,
                draggable: true,
                animation: google.maps.Animation.DROP, // hiệu ứng xuất hiện
            });
            myMarkers.push(marker);
        }
        // Sets the map on all markers in the array.
        function setAllMap(map) {
            for (var i = 0; i < myMarkers.length; i++) {
                myMarkers[i].setMap(map);
            }
        }
        // hiện map tại vị trị định sẵn
        function showMapAt(lat, lng) {
            var position = new google.maps.LatLng(lat, lng);
            map.setCenter(position);
        }

    </script>
}